<template>
  <van-nav-bar
      :title="title"
      :left-arrow="!(route.path ==='/team'
      || route.path === '/user'
      || route.path === '/'
      || route.path === '/user/login'
      || route.path === '/user/register'
      || route.path === '/user/list')"
      @click-left="onClickLeft"

      id="title">
    <template #right>
      <van-badge v-if="!(route.path.includes('/search')
              || route.path.includes('/team')
              || route.path.includes('/user')
              || route.path.includes('/user/login')
              || route.path.includes('/user/list')
              || route.path.includes('/user/update')
              || route.path.includes('/user/update')
              || route.path.includes('/user/edit')
              || route.path.includes('/user/team/lead')
              || route.path.includes('/user/team/join')
              || route.path.includes('/team/add')
              || route.path.includes('/user/register')
              || route.path.includes('/user/select/tag'))" color="#EE0A25" content="搜伙伴" position="left" id="badge" @click="onSearchUser"/>
      <van-icon v-if="!(route.path.includes('/search')
              || route.path.includes('/team')
              || route.path.includes('/user')
              || route.path.includes('/user/login')
              || route.path.includes('/user/list')
              || route.path.includes('/user/update')
              || route.path.includes('/user/update')
              || route.path.includes('/user/edit')
              || route.path.includes('/user/team/lead')
              || route.path.includes('/user/team/join')
              || route.path.includes('/team/add')
              || route.path.includes('/user/register')
              || route.path.includes('/user/select/tag'))" name="search" size="25" @click="onSearchUser"/>
      <van-button plain
                  v-if="(route.path === '/team') || (route.path === '/user/team/lead') || (route.path === '/user/team/join')"
                  size="small"
                  icon="flag-o"
                  @click="toAddTeamPage"
                  type="primary"
                  id="createTeam"
      >创建队伍</van-button>
      <van-button plain
                  v-if="(route.path === '/user/list')"
                  size="small"
                  @click="stopSearchUser"
                  type="primary"
                  id="createTeam"
      >返回</van-button>
    </template>
  </van-nav-bar>
  <div id="content">
    <router-view/>
  </div>
  <van-tabbar route>
    <van-tabbar-item to="/" icon="home-o" name="index">匹配伙伴</van-tabbar-item>
    <van-tabbar-item to="/team" icon="search" name="team">伙伴组队</van-tabbar-item>
    <van-tabbar-item to="/user" icon="friends-o" name="user">我自己</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import routes from "../config/route.ts";

const router = useRouter();
const route = useRoute();

// 标题默认值
const DEFAULT_TITLE = '伙伴匹配';
const title = ref(DEFAULT_TITLE);

/**
 * 跳转创建队伍页
 */
const toAddTeamPage = () => {
  router.push({
    path: '/team/add'
  })
}

/**
 * 根据路由切换标题
 */
router.beforeEach((to) => {
  const toPath = to.path;
  const route = routes.find((route) => {
    return toPath == route.path;
  })
  title.value = route?.title ?? DEFAULT_TITLE;
})

const onClickLeft = () => {
  router.back();
}

const onSearchUser = () => {
  router.push('/search');
}

const stopSearchUser = () => {
  router.back();
}

</script>

<style scoped>
#content {
  padding-bottom: 50px;
}
#title {
  opacity: 89%;
}
#badge {
  --van-badge-font-size: 14px;
  --van-badge-font-weight: 500;
  opacity: 90%;
}
#createTeam {
  font-size: 15px;
  opacity: 78%;
  --van-button-border-width: 1.5px;
}
</style>